<template>
    <div class="edit-video">
        <a-row @click.native="back" class="back-panel">
            <a-icon type="left" />
            返回
        </a-row>
        <vue-scroll :ops="ops" class="scroll-area">
            <a-form-model ref="ruleForm" :model="video" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item label="视频名" prop="newName">
                    <a-input v-model="video.newName" allow-clear />
                </a-form-model-item>
                <a-form-model-item label="原视频名" prop="name">
                    <a-input v-model="video.name" allow-clear />
                </a-form-model-item>
                <a-form-model-item label="评分" required>
                    <a-input-number :min="0" :max="10" :step="0.1" @change="numberChange" :value="video.score" />
                </a-form-model-item>
                <a-form-model-item label="分类" required>
                    <a-tag
                        closable
                        v-for="({ label, visible }, k) in tempTags"
                        :key="k"
                        @close="closeTag(k)"
                        :visible="visible"
                        v-decorator="['category', { rules: [{ required: true, message: '' }] }]"
                    >
                        {{ label }}
                    </a-tag>
                    <a-icon type="redo" @click="resetTags" />
                    <a-row type="flex" justify="center" align="middle" class="add-tag" :gutter="16">
                        <a-col style="width: calc(100% - 80px);">
                            <a-select
                                mode="tags"
                                style="width: 100%"
                                :token-separators="[',']"
                                @change="handleChange"
                                allowClear
                                :value="selections"
                            >
                                <a-select-option v-for="v in categoryList" :key="v">
                                    {{ v }}
                                </a-select-option>
                            </a-select>
                        </a-col>
                        <a-col>
                            <a-button type="primary" @click="addTags">添加</a-button>
                        </a-col>
                    </a-row>
                </a-form-model-item>
                <a-form-model-item label="封面">
                    <a-row type="flex" :gutter="16">
                        <a-col><img :src="video.imgSrc" class="cover" /></a-col>
                        <a-col class="upload" v-if="!newCover">
                            <input ref="uploadRef" type="file" class="upload-input" @change="uploadChange" />
                            <p><a-icon type="plus" /></p>
                            <p role="upload">上传</p>
                        </a-col>
                        <div class="upload-img" v-else @mouseenter="mouseEnter" @mouseleave="mouseLeave">
                            <img :src="newCover.imgSrc" />
                            <div class="del-img" :style="`opacity: ${mouseFlag == 'enter' ? '0.5' : '0'}`">
                                <a-row type="flex" justify="center" align="middle" class="del-icon">
                                    <a-icon type="delete" @click.stop="delImg" />
                                </a-row>
                            </div>
                        </div>
                    </a-row>
                </a-form-model-item>
            </a-form-model>
            <a-row type="flex">
                <a-col :span="4"></a-col>
                <a-col :span="19">
                    <a-row type="flex" justify="end">
                        <a-button type="primary" @click="handleSubmit">
                            提交
                        </a-button>
                    </a-row>
                </a-col>
            </a-row>
        </vue-scroll>
    </div>
</template>
<script>
    import { toBase64 } from '@/util/get-img-base64'
    import { writeData } from '@/util/file-action'
    export default {
        name: 'EditVideo',
        data() {
            return {
                video: {},
                rules: {
                    name: [{ required: true, message: '请输入原视频名', trigger: 'blur' }],
                    newName: [{ required: true, message: '请输入视频名', trigger: 'blur' }],
                    score: [{ required: true, message: '请输入评分', trigger: 'change' }],
                    tempTags: [
                        {
                            type: 'array',
                            required: true,
                            message: '分类不能为空',
                            trigger: 'change',
                        },
                    ],
                },
                newCover: null,
                tagType: 'plus',
                categoryList: [],
                ops: {
                    vuescroll: {},
                    scrollPanel: { scrollingX: false, easing: 'easeInQuad' },
                    rail: {},
                    bar: { background: '#E8E8E8' },
                },
                mouseFlag: 'leave',
                tempTags: [],
                labelCol: { span: 4 },
                wrapperCol: { span: 19 },
                selections: [], // select选中的分类
            }
        },
        mounted() {
            const { k } = this.$route.query
            this.video = this.$store.state.videos.videoList[k]
            this.resetTags()
            let categoryList = this.$store.state.videos.categoryList
            categoryList.splice(0, 1)
            this.categoryList = categoryList
        },
        watch: {},
        methods: {
            closeTag(k) {
                this.$set(this.tempTags, k, { label: this.tempTags[k].label, visible: false })
            },
            handleSubmit() {
                const { video, tempTags, newCover } = this
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        let flag = true
                        tempTags.forEach((v) => (flag = v.visible))
                        if (flag) {
                            const category = tempTags.map(({ label, visible }) => {
                                if (visible) return label
                            })
                            const form = {
                                ...video,
                                category,
                            }
                            if (newCover) {
                                form.imgSrc = newCover.imgSrc
                            }
                            console.log(form)
                            writeData([form], ' videos', 'video')
                        } else {
                            this.$message.warning('分类不能为空')
                        }
                    }
                })
            },
            async uploadChange() {
                const file = this.$refs.uploadRef.files[0]
                if (file.type == 'image/png' || file.type == 'image/jpeg') {
                    this.newCover = { file, imgSrc: await toBase64(file) }
                }
            },
            numberChange(v) {
                this.video.score = v
            },
            handleChange(v) {
                this.selections = v
            },
            resetTags() {
                this.tempTags = []
                this.video.category.forEach((v) => {
                    this.tempTags.push({
                        visible: true,
                        label: v,
                    })
                })
            },
            delImg() {
                this.newCover = null
            },
            mouseEnter() {
                this.mouseFlag = 'enter'
            },
            mouseLeave() {
                this.mouseFlag = 'leave'
            },
            back() {
                this.$router.back(-1)
            },
            editTag() {
                this.tagType == 'plus' ? 'minus' : 'plus'
            },
            addTags() {
                for (const { label } of this.tempTags) {
                    const i = this.selections.findIndex((v) => v == label)
                    if (i > -1) {
                        this.selections.splice(i, 1)
                    }
                }
                this.selections.forEach((v) => {
                    this.tempTags.push({
                        label: v,
                        visible: true,
                    })
                })
                this.selections = []
            },
        },
    }
</script>
<style lang="less" scoped>
    .edit-video {
        height: 100%;
        .back-panel {
            user-select: none;
            height: 30px;
            cursor: pointer;
        }
        .scroll-area {
            height: calc(100% - 30px) !important;
            /deep/ .ant-tag {
                padding: 5px 10px;
                font-size: 15px;
            }
            .require {
                display: inline-block;
                margin-right: 4px;
                color: #f5222d;
                font-size: 14px;
                font-family: SimSun, sans-serif;
                line-height: 1;
            }
            .cover {
                width: 150px;
                height: 215px;
            }
            .add-tag {
                margin-top: 10px;
            }
            .upload {
                width: 150px;
                height: 215px;
                background: #fafafa;
                font-size: 14px;
                border: 1px dashed #cccccc;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                .upload-input {
                    height: 100%;
                    width: 100%;
                    position: absolute;
                    opacity: 0;
                }
            }
            .upload p {
                margin: 0px;
                height: 30px;
            }
            .upload-img {
                display: flex;
                justify-content: center;
                align-items: center;
                .del-img {
                    width: 150px;
                    height: 215px;
                    background: black;
                    position: absolute;
                    .del-icon {
                        height: 100%;
                        font-size: 18px;
                        color: white;
                    }
                }
            }
            .upload-img img {
                width: 150px;
                height: 215px;
            }
        }
    }
</style>
